<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
	<title>华南理工大学人才交流市场</title>
</head>
<body>
<script src="js/jquery.js"></script>
<script src="js/index.js"></script>
<link rel="stylesheet"  href="css/index.css">
	<div class="header comWidth">
		<div class="topBar">
			<div class="comWidth">
				<div class ="header fl">
					<a href="pages/information.html" target="_blank">关于基地</a>
				</div>
				<div class="header fr">
					<a class="mainBtn" href="pages/login.html" target="_blank">登录</a>
					<!-- <span id="line">|</span> -->
					<span class="line">|</span>
					<a class="mainBtn" href="pages/register.html" target="_blank">注册</a>
				</div>
			</div>
		</div>
	</div>
	<div class="logoBar comWidth">
		<div class="comWidth">
			<span class = "logo fl">
				<a href=""><img src="#" alt="点击进入个人主页"></a>
			</span>
			<span class="fl">华南理工大学 <br /> 人才交流平台</span>		
			<hr class="fl" ／>
			<div class="fl">
				<a  class ="mainBtn"  id="indexBtn" >首页</a>
				<a class="mainBtn" id="teamBtn" >团队</a>
			</div>
			<div class="searchBox fr">
				<input type = "text" class="searchText" placeholder="输入职位、团队、项目名称">
				<input type = "button" class="searchBtn">
			</div>
		</div>
	</div>
	<div id="indexDiv">
		<div class="banner comWidth">
			<div class="mediumBox">
				<table class="rolesTable">
					<th colspan="3">为实现学生价值提供更好的服务	</th>
					<tr>
						<td>
							<!-- <input class="roles" type="button" value="学生"></input> -->
							<a class="roles" href="pages/roles_stu.html" target="_blank" id="studentRole">学生</a>
						</td>
						<td>
							<!-- <input class="roles" type="button" value="团队"></input> -->
							<a class="roles" href="pages/roles_team.html" target="_blank" id="teamRole">团队</a>
						</td>
						<td>
							<!-- <input class="roles" type="button" value="项目"></input> -->
							<a class="roles" href="pages/roles_project.html" target="_blank" id="projectRole">项目</a>
						</td>
					</tr>
					<tr>
						<td>
							<!-- <input class="roles" type="button" value="实习"></input> -->
							<a class="roles" href="pages/roles_pratice.html" target="_blank" id="praticeRole">实习</a>
						</td>
						<td>
							<!-- <input class="roles" type="button" value="公司"></input>-->				
	 						<a class="roles" href="pages/roles_company.html" target="_blank" id="companyRole">公司</a>	
	 					</td>
						<td>
							<!-- <input class="roles" type="button" value="校组织"></input> -->
							<a class="roles" href="pages/roles_school.html" target="_blank" id="schoolRole">校组织</a>
						</td>
					</tr>
				</table>	
			</div>

		</div>
		<div class="bannerBar comWidth banner_big">
			<button class="preBtn "></button>
			<div class="imgBox">
				<ul class="imgList fl">
					<li><a href="" target="_blank"><img src="" alt="1"></a></li>
					<li><a href="" target="_blank"><img src="" alt="2"></a></li>
					<li><a href="" target="_blank"><img src="" alt="3"></a></li>
					
				</ul>
			</div>
			<button class="nextBtn "></button>
		</div>
		<div class="bannerBar comWidth hotTeam">
			<div class="hotTeamTopic">
				<span class="decoration deco_left"><hr /></span>
				<span class="topic">热门团队</span>
				<span class="decoration deco_right"><hr /></span>
			</div>
			<button class="preBtn_teams "></button>
			<div class="hotTeams">
				<ul class="teamList">
		
					<li>
						<a href="pages/hotTeamRes.html" target="_blank"><img src=""><div class="desc">团队名称</div><span></span></a>
					</li>
					<li>
						<a href="pages/hotTeamRes.html" target="_blank"><img src=""><div class="desc">团队名称</div><span></span></a>
					</li>
					<li>
						<a href="pages/hotTeamRes.html" target="_blank"><img src=""><div class="desc">团队名称</div><span></span></a>
					</li>
					<li>
						<a href="pages/hotTeamRes.html" target="_blank"><img src=""><div class="desc">团队名称</div><span></span></a>
					</li>
					<li>
						<a href="pages/hotTeamRes.html" target="_blank"><img src=""><div class="desc">团队名称</div><span></span></a>
					</li>
					<li>
						<a href="pages/hotTeamRes.html" target="_blank"><img src=""><div class="desc">团队名称</div><span></span></a>
					</li>
					<li>
						<a href="pages/hotTeamRes.html" target="_blank"><img src=""><div class="desc">团队名称</div><span></span></a>
					</li>
					<li>
						<a href="pages/hotTeamRes.html" target="_blank"><img src=""><div class="desc">团队名称</div><span></span></a>
					</li>
					<li>
						<a href="pages/hotTeamRes.html" target="_blank"><img src=""><div class="desc">团队名称</div><span></span></a>
					</li>
				</ul>
			</div>
			<!-- <div class="teamIntro">
				<ul class="teamInfoList">
					<li><a href="#1"><span>111111</span></a></li>
					<li><a href="#2"><span>222222</span></a></li>
					<li><a href="#3"><span>333333</span></a></li>
					<li><a href="#4"><span>444444</span></a></li>
					<li><a href="#5"><span>555555</span></a></li>
					<li><a href="#6"><span>666666</span></a></li>
					<li><a href="#7"><span>777777</span></a></li>
					<li><a href="#8"><span>888888</span></a></li>
					<li><a href="#9"><span>999999</span></a></li>
				</ul>
			</div> -->
			<button class="nextBtn_teams "></button>
		</div>
		<div class="bannerBar comWidth hotProject">
			<div class="hotProjectTopic">
				<span class="decoration deco_left"><hr /></span>
				<span class="topic">热门项目</span>
				<span class="decoration deco_right"><hr /></span>
			</div>
			<button class="preBtn_project "></button>
			<div class="hotProjects">
				<ul class="projectList">
			<!-- 		<li>
						<a href="#t1"><img src="img/team/team1.jpg"></a>
						<a href="#t2"><img src="img/team/team2.jpg"></a>
						<a href="#t3"><img src="img/team/team3.jpg"></a>
					</li>
					<li>
						<a href="#t4"><img src="img/team/team4.jpg"></a>
						<a href="#t5"><img src="img/team/team5.jpg"></a>
						<a href="#t6"><img src="img/team/team6.jpg"></a>
					</li>
					<li>
						<a href="#t7"><img src="img/team/team7.png"></a>
						<a href="#t8"><img src="img/team/team8.png"></a>
						<a href="#t9"><img src="img/team/team9.png"></a>
					</li> -->



					<!-- <li><a href="#t1"><img src="img/team/team3.jpg"></a></li>
					<li><a href="#t2"><img src="img/team/team4.jpg"></a></li>
					<li><a href="#t3"><img src="img/team/team5.jpg"></a></li>
					<li><a href="#t4"><img src="img/team/team2.jpg"></a></li>
					<li><a href="#t5"><img src="img/team/team1.jpg"></a></li>
					<li><a href="#t6"><img src="img/team/team6.jpg"></a></li>
					<li><a href="#t7"><img src="img/team/team7.png"></a></li>
					<li><a href="#t8"><img src="img/team/team8.png"></a></li>
					<li><a href="#t9"><img src="img/team/team9.png"></a></li> -->



					<li>
						<a href="pages/hotProjectRes.html" target="_blank"><img src="img/team/team1.jpg"><div class="desc"></div><span></span></a>
					</li>
					<li>
						<a href="pages/hotProjectRes.html" target="_blank"><img src="img/team/team2.jpg"><div class="desc"></div><span></span></a>
					</li>
					<li>
						<a href="pages/hotProjectRes.html" target="_blank"><img src="img/team/team3.jpg"><div class="desc"></div><span></span></a>
					</li>
					<li>
						<a href="pages/hotProjectRes.html" target="_blank"><img src="img/team/team4.jpg"><div class="desc"></div><span></span></a>
					</li>
					<li>
						<a href="pages/hotProjectRes.html" target="_blank"><img src="img/team/team5.jpg"><div class="desc"></div><span></span></a>
					</li>
					<li>
						<a href="pages/hotProjectRes.html" target="_blank"><img src="img/team/team6.jpg"><div class="desc"></div><span></span></a>
					</li>
					<li>
						<a href="pages/hotProjectRes.html" target="_blank"><img src="img/team/team7.png"><div class="desc"></div><span></span></a>
					</li>
					<li>
						<a href="pages/hotProjectRes.html" target="_blank"><img src="img/team/team8.png"><div class="desc"></div><span></span></a>
					</li>
					<li>
						<a href="pages/hotProjectRes.html" target="_blank"><img src="img/team/team9.png"><div class="desc"></div><span></span></a>
					</li>
				</ul>
			</div>
			<button class="nextBtn_project "></button>
		</div>
	</div>
	<script type="text/javascript">
		$(document).ready(function(){
			// －－－－－－－－－－－－－－－banner初始化－－－－－－－－－－－－－－－－－－
		    $.getJSON('js/banners.json',function(data){
		        var lis = $(".imgList li img");
		        var link = $(".imgList li a");
		        for (var i = 0; i < lis.length; i++) {
		            var bannerUrl = data.banner[i].bannerImg;
		            var imgHref = data.banner[i].bannerUrl;
		            $(lis[i]).attr("src",bannerUrl);
		            $(link[i]).attr("href",imgHref)
		        }
		    })
			var curIndex_banner = 0;
			var imgLen_banner = $(".imgList li").length;
  			$(".preBtn").click(function(){
  				curIndex_banner = (curIndex_banner > 0) ? (--curIndex_banner) : (imgLen_banner - 1);
		    	changeTo(curIndex_banner);
  			});
  			$(".nextBtn").click(function(){
  				// curIndex_banner = (curIndex_banner < imgLen_banner - 1) ? (++curIndex_banner) : 0;
  				if (curIndex_banner == imgLen_banner - 1) {
  					curIndex_banner = 0;
  				}
  				else{
  					curIndex_banner++;
  				}
		    	changeTo(curIndex_banner);
		    	
  			});
  			function changeTo(num){
  				var goLeft = num * 600;
		    	$(".imgList").animate({left: "-" + goLeft + "px"},500);
  			}
  			$(".imgList").hover(function() { 
				clearInterval(picTimer); 
				},function() { 
					picTimer = setInterval(function() { 
						curIndex_banner++; 
					// changeTo(curIndex_banner); 
					// curIndex_banner++; 
					if(curIndex_banner == imgLen_banner) {curIndex_banner = 0;} 
					changeTo(curIndex_banner); 
					},5000); //此3000代表自动播放的间隔，单位：毫秒 
				}).trigger("mouseleave"); 
		})
	</script>
</body>
</html>